<template>
	<view class="user_INFO">
		<view class="content">
			<view class="from_text">基础信息</view>
			<view class="from">
				<u--form labelPosition="left" :model="form" :rules="rules" ref="form1" labelWidth="80px">
					<u-form-item label="姓名" prop="userName" borderBottom>
						<u--input v-model="form.userName" border="none" placeholder="请输入姓名"></u--input>
					</u-form-item>
					<u-form-item label="性别" prop="sex" borderBottom @click="showSex = true; ">
						<u--input v-model="form.sexName" disabled disabledColor="#ffffff" placeholder="请选择性别"
							border="none">
						</u--input>
						<u-icon slot="right" name="arrow-right"></u-icon>
					</u-form-item>
					<u-form-item label="籍贯" prop="jg" borderBottom>
						<u--input v-model="form.jg" border="none" placeholder="请输入籍贯"></u--input>
					</u-form-item>
					<u-form-item label="民族" prop="mz" borderBottom>
						<u--input v-model="form.mz" border="none" placeholder="请输入民族"></u--input>
					</u-form-item>
					<u-form-item label="出生年月" prop="csny" borderBottom @click="getBirthday">
						<u--input v-model="form.csny" disabled disabledColor="#ffffff" placeholder="请选择出生年月"
							border="none"></u--input>
						<u-icon slot="right" name="arrow-right"></u-icon>
					</u-form-item>
					<u-form-item label="证件类型" prop="certificatesType" borderBottom @click="getCertificates1">
						<u--input v-model="form.certificatesType" disabled disabledColor="#ffffff" placeholder="请选择证件"
							border="none"></u--input>
						<u-icon slot="right" name="arrow-right"></u-icon>
					</u-form-item>
					<u-form-item label="证件号码" prop="zjhm" borderBottom>
						<u--input v-model="form.zjhm" border="none" placeholder="请输入证件号码"></u--input>
					</u-form-item>
					<u-form-item label="政治面貌" prop="zzmm" borderBottom>
						<u--input v-model="form.zzmm" disabledColor="#ffffff" placeholder="请选择政治面貌" border="none">
						</u--input>
						<u-icon slot="right" name="arrow-right"></u-icon>
					</u-form-item>
					<view class="from_text">
						<view class="photo">照 片</view>
						<u-upload :fileList="fileList1" @afterRead="afterRead" @delete="deletePic" name="1" multiple
							:maxCount="1" :previewFullImage="true"></u-upload>
					</view>
					<view class="from_text">
						<view class="photo">签 名</view>
						<view class="">
							<img style='width: 200rpx;height: 200rpx;' :src="form.grqzsc" alt="">
						</view>
						<view class="box" @click="toAutograph">
							<u-icon name="edit-pen" size="28"></u-icon>
						</view>
					</view>
					<u-action-sheet :show="showSex" :actions="actions" title="请选择性别" @close="showSex = false"
						@select="sexSelect">
					</u-action-sheet>
					<u-datetime-picker :minDate="0" :show="shwoBirthday" :title="dataTitle" mode="date"
						@confirm="getData" @cancel="shwoBirthday = false">
						
					</u-datetime-picker>
					<u-picker :show="shwocertificates" :columns="columns" keyName="label" @confirm="getCertificates"
						@cancel="shwocertificates = false" :title="pickertitle"></u-picker>
					<!--    学历信息-->
					<view class="from_text">学历信息</view>
					<u-form-item label="最高学历" prop="zgxl" borderBottom @click="getMaxHeightform">
						<u--input v-model="form.zgxlName" disabled disabledColor="#ffffff" placeholder="请选择学历"
							border="none"></u--input>
						<u-icon slot="right" name="arrow-right"></u-icon>
					</u-form-item>
					<u-form-item label="最高学位" prop="zgxw" borderBottom>
						<u--input v-model="form.zgxw" placeholder="请选择学位" border="none"></u--input>
					</u-form-item>
					<u-form-item label="毕业院校" prop="zhbyyx" borderBottom>
						<u--input v-model="form.zhbyyx" border="none" placeholder="请输入毕业院校"></u--input>
					</u-form-item>
					<u-form-item label="专业" prop="zy" borderBottom>
						<u--input v-model="form.zy" border="none" placeholder="请输入你的专业"></u--input>
					</u-form-item>
					<view class="from_text">工作信息</view>
					<u-form-item label="健康状况" prop="jkzk" borderBottom>
						<u--input v-model="form.jkzk" border="none" placeholder="输入健康状况"></u--input>
					</u-form-item>
					<u-form-item label="职务" prop="zw" borderBottom>
						<u--input v-model="form.zw" border="none" placeholder="输入职务"></u--input>
					</u-form-item>
					<u-form-item label="职称" prop="zc" borderBottom>
						<u--input v-model="form.zc" border="none" placeholder="输入职称"></u--input>
					</u-form-item>
					<!--          <u-form-item prop="workContent" borderBottom>-->
					<view class="from_text" style="color: #333">工作经历</view>
					<u-textarea type="textarea" v-model="form.gzjl" placeholder="请输入工作内容" height="120"
						confirm-type="return" style="background:#f6f6f6;margin-bottom: 30px"></u-textarea>
					<!--          </u-form-item>-->
					<u-form-item label="办公电话" prop="bgdh" borderBottom>
						<u--input v-model="form.bgdh" border="none" placeholder="输入办公电话"></u--input>
					</u-form-item>
					<u-form-item label="移动电话" prop="phonenumber" borderBottom>
						<u--input v-model="form.phonenumber" border="none" placeholder="输入移动电话"></u--input>
					</u-form-item>
					<u-form-item label="电子邮箱" prop="email" borderBottom>
						<u--input v-model="form.email" border="none" placeholder="输入电子邮箱"></u--input>
					</u-form-item>
					<u-form-item label="入职日期" prop="jrbdwrq" borderBottom @click="gentryDate" ref="item2">
						<u--input v-model="form.jrbdwrq" disabled disabledColor="#ffffff" placeholder="请选择入职日期"
							border="none"></u--input>
						<u-icon slot="right" name="arrow-right"></u-icon>
					</u-form-item>
					<u-form-item label="工龄" prop="gl" borderBottom>
						<u--input v-model="form.gl" border="none" placeholder="输入工龄"></u--input>
					</u-form-item>
					<dept :label="'所属部门'" :title="'所属部门'" :placeholder="'请选择所属部门'" v-model="form.deptId" :prop="'deptId'"></dept>

					<u-form-item label="工号" prop="gh" borderBottom>
						<u--input v-model="form.gh" border="none" placeholder="输入工号"></u--input>
					</u-form-item>

					<u-form-item label="人员类型" prop="rylxName" borderBottom @click="getPersonType">
						<u--input v-model="form.rylxName" disabled disabledColor="#ffffff" placeholder="请选择人员类型"
							border="none"></u--input>
						<u-icon slot="right" name="arrow-right"></u-icon>
					</u-form-item>
					<view class="from_text" style="color: #333">备注</view>
					<u-textarea type="textarea" v-model="form.bz" placeholder="请输入..." height="120"
						confirm-type="return" style="background:#f6f6f6;"></u-textarea>
				</u--form>
			</view>
			<u-button text="提 交" type="primary" @click="showModal =true "></u-button>
		</view>
		<u-modal :show="showModal" content='请核对信息无误后点击确认' :showCancelButton='true' @cancel="showModal= false"
			@confirm="submit" width="300"></u-modal>
	</view>
</template>

<script>
	import dept from "@/pages/Components/department";
	import {
		getDepartmentAPI,
		getUserPhoto
	} from "../../api/api";
	import {
		URL
	} from '../../api/request.js'
	export default {
		components: {
			dept
		},
		onShow() {
			let pages = getCurrentPages();
			let currPage = pages[pages.length - 1];
			let brand = currPage.brand
			// if (!!brand) {
			// 	this.form.grqzsc = brand.fileUrl
			// }
		},
		data() {
			return {
				showModal: false,
				//绘图图像
				option: '',
				dataTitle: '',
				ctx: '',
				//路径点集合
				points: [],
				//签名图片
				SignatureImg: '',
				//是否展示操作菜单
				actionSheetShow: false,
				pickerType: 0,
				dataType: 0,
				fileList1: [],
				pickertitle: '请选择证件类型',
				shwocertificates: false, //证件选择弹窗
				shwoBirthday: false,
				showSex: false,
				columns: [],
				form: {
					userName: '',
					sex: '',
					jg: '', //籍贯
					mz: '', //民族
					csny: '', //出生年月
					certificatesType: '', //证件类型
					zjlx: "1",
					zjhm: '', //证件号码
					zzmm: '', //政治面貌
					zp: '',
					grqzsc: '', //个人签字图片路径
					zgxl: '', //最高学历信息
					zgxw: '', //最高学位信息
					zhbyyx: '', //毕业院校
					zy: '', //专业
					jkzk: '', //健康状况
					zw: '', //职务
					zc: '', //职称
					gzjl: '', //工作内容
					bgdh: '',
					phonenumber: '',
					email: '',
					jrbdwrq: '', //参加本单位时间
					gl: '', //工龄
					department: '',
					gh: '', //工号
					rylxName: '',
					bz: '', //备注
					rylx: '', //人员类型
				},
				actions: [{
						value: 0,
						name: '男',
					},
					{
						value: 1,
						name: '女',
					},
				],
				rules: {
					'userName': {
						type: 'string',
						required: true,
						message: '请填写姓名',
						trigger: ['blur', 'change']
					},
					'sexName': {
						type: 'string',
						max: 1,
						required: true,
						message: '请选择男或女',
						trigger: ['blur', 'change']
					},
					'jg': {
						type: 'string',
						required: true,
						message: '请输入籍贯信息',
						trigger: ['blur', 'change']
					},
					'mz': {
						type: 'string',
						required: true,
						max: 10,
						message: '请输入民族',
						trigger: ['blur', 'change']
					},
					'csny': {
						type: 'string',
						required: true,
						message: '请输入选择出生日期',
						trigger: ['blur', 'change']
					},
					'certificatesType': {
						type: 'string',
						required: true,
						message: '请输入选择证件类型',
						trigger: ['blur', 'change']
					},
					'zjhm': {
						type: 'string',
						required: true,
						message: '请输入证件号码',
						trigger: ['blur', 'change']
					},
					'zzmm': {
						type: 'string',
						required: true,
						message: '请选择政治面貌',
						trigger: ['blur', 'change']
					},
					'zgxl': {
						type: 'string',
						required: true,
						message: '请选择最高学历',
						trigger: ['blur', 'change']
					},
					'zgxw': {
						type: 'string',
						required: true,
						message: '请选择最高学位',
						trigger: ['blur', 'change']
					},
					'zhbyyx': {
						type: 'string',
						required: true,
						message: '请输入毕业院校',
						trigger: ['blur', 'change']
					},
					'zy': {
						type: 'string',
						required: true,
						message: '请输入您的专业',
						trigger: ['blur', 'change']
					},
					'jkzk': {
						type: 'string',
						required: true,
						message: '请输入您的健康状况',
						trigger: ['blur', 'change']
					},
					'zw': {
						type: 'string',
						required: true,
						message: '请输入您的职务',
						trigger: ['blur', 'change']
					},
					'zc': {
						type: 'string',
						required: true,
						message: '请输入您的职称',
						trigger: ['blur', 'change']
					},
					'phonenumber': {
						type: 'string',
						required: true,
						message: '请输入11位手机号',
						trigger: ['blur', 'change']
					},
					'gh': {
						type: 'string',
						required: true,
						message: '请输入你的工号',
						trigger: ['blur', 'change']
					},
				},
				userId: ''
			};
		},
		onLoad(option) {
			this.userId = uni.getStorageSync('userId')
			
		},
		methods: {
			getPersonType() {
				this.pickerType = 6
				this.pickertitle = '人员类型'
				this.columns = [
					[{
						value: 1,
						label: '分管领导'
					}, {
						value: 2,
						label: '带班领导'
					}, {
						value: 3,
						label: '安全总监'
					}, {
						value: 4,
						label: '安全管理部门负责人'
					}, {
						value: 5,
						label: '车间主任'
					}, {
						value: 6,
						label: '安全管理人员'
					}, {
						value: 7,
						label: '特种作业人员'
					}, {
						value: 8,
						label: '外来作业人员'
					}, {
						value: 9,
						label: '普通员工'
					}]
				]
				this.shwocertificates = true
			},

			gentryDate() {
				this.dataType = 1
				this.dataTitle = '入职日期'
				this.shwoBirthday = true;
			},
			getBirthday() {
				this.dataType = 0
				this.dataTitle = '出生年月'
				this.shwoBirthday = true;
			},
			toAutograph() {
				uni.navigateTo({
					url: `/pages/autograph/autograph1?userId=${this.userId}`
				})
			},

			// 图片上传  删除图片
			deletePic(event) {
				this[`fileList${event.name}`].splice(event.index, 1)
			},
			//新增图片
			async afterRead(event) {
				// 当设置 mutiple 为 true 时, file 为数组格式，否则为对象格式
				let lists = [].concat(event.file)
				let fileListLen = this[`fileList${event.name}`].length
				lists.map((item) => {
					this[`fileList${event.name}`].push({
						...item,
						status: 'uploading',
						message: '上传中'
					})
				})
				for (let i = 0; i < lists.length; i++) {
					const result = await this.uploadFilePromise(lists[i].url)
					let item = this[`fileList${event.name}`][fileListLen]
					this[`fileList${event.name}`].splice(fileListLen, 1, Object.assign(item, {
						status: 'success',
						message: '上传成功',
						url: result
					}))
					fileListLen++
				}
			},
			getValue(url){
				console.log(url,456);
				this.form.grqzsc=url
			},
			customFun(obj) {
				if (obj) {
					// 将打印出 { name: '周某某', sex: '女' }
					console.log(obj, 6556)
				}
			},
			uploadFilePromise(url) {
				return new Promise((resolve, reject) => {
					let a = uni.uploadFile({
						url: URL + '/common/upload',
						filePath: url,
						name: 'file',
						header: {
							'Authorization': `Bearer ${uni.getStorageSync('token')}`
						},
						formData: {
							userId: this.userId
						},
						success: (res) => {
							this.form.zpsc = JSON.parse(res.data).url
							setTimeout(() => {
								resolve(res.data.data)
							}, 1000)
						}
					});
				})
			},

			getCertificates1() {
				this.pickerType = 0
				this.columns = [
					[{
						value: '1',
						label: '居民身份证'
					}, {
						value: '2',
						label: '军人证'
					}, {
						value: '3',
						label: '港澳台居民身份证'
					}, {
						value: '4',
						label: '华侨身份证'
					}, {
						value: '5',
						label: '外籍护照'
					}, {
						value: '6',
						label: '其他'
					}]
				];
				this.pickertitle = '请选择证件类型';
				this.shwocertificates = true;
			},
			getMaxHeightform() {
				this.pickerType = 2
				this.columns = [
					[{
						value: '1',
						label: '小学'
					}, {
						value: '2',
						label: '初中'
					}, {
						value: '3',
						label: '高中'
					}, {
						value: '4',
						label: '专科'
					}, {
						value: '5',
						label: '本科'
					}, {
						value: '6',
						label: '硕士'
					}, {
						value: '7',
						label: '博士'
					}]
				];
				this.pickertitle = '最高学历';
				this.shwocertificates = true;
			},

			sexSelect(e) {
				this.form.sexName = e.name
				this.form.sex = e.value
			},
			getData(e) {
				//  日期选择  TODO
				const timeFormat = uni.$u.timeFormat
				if (this.dataType === 0) {
					this.form.csny = timeFormat(e.value, 'yyyy-mm-dd')
				} else if (this.dataType === 1) {
					this.form.jrbdwrq = timeFormat(e.value, 'yyyy-mm-dd')
				}
				this.shwoBirthday = false
			},
			getCertificates(e) {
				console.log(e, 123);
				if (this.pickerType === 0) {
					this.form.certificatesType = e.value[0].label
					this.form.zjlx = e.value[0].value
					this.shwocertificates = false
				} else if (this.pickerType === 2) {
					this.form.zgxlName = e.value[0].label
					this.form.zgxl = e.value[0].value
					this.shwocertificates = false
				} else if (this.pickerType === 6) {
					this.form.rylxName = e.value[0].label
					this.form.rylx = e.value[0].value
					this.shwocertificates = false
				}
			},
			submit() {
				console.log(this.form, 123);
				this.form.userId = uni.getStorageSync('userId')
				getUserPhoto(
					this.form
				).then((r) => {
					if (r.code === 200) {
						this.showModal = false
						uni.reLaunch({
							url: '../home/home'
						})
					}
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
	.user_INFO {
		width: 100vw;
		padding-bottom: 30rpx;
		background-color: #f6f6f6;

		.content {
			width: 90%;
			margin: 0 auto;

			.from {
				margin-bottom: 30rpx;
				padding: 0 60rpx 30rpx 60rpx;
				border-radius: 15rpx;
				background-color: #FFF;

				.from_text {
					padding: 20rpx 0;

					.photo {
						margin: 0 0 20rpx 0;
					}

					.box {
						display: flex;
						justify-content: center;
						align-items: center;
						height: 160rpx;
						width: 160rpx;
						background: #f4f5f7;
					}

					.myCanvas {
						height: 200px;
					}
				}
			}

			.from_text {
				padding: 30rpx 15rpx;
				color: #999999;
			}
		}

	}
</style>
